<template>
    <div>
        <!-- 内容 -->
        <div class="FoundationClass">
            <van-tabs @change="tabsChange" v-model:active="active" type="card" class="FoundationContentStyle"
                title-active-color="#fff">
                <van-tab name="qyjc" title="清淤检测"
                    title-style="font-size: 16px; font-weight: 600;height:35px;display:flex;justify-content: start;padding-left: 10px;">
                </van-tab>
                <van-tab name="gdxf" title="管道修复"
                    title-style="font-size: 16px; font-weight: 600;height:35px;display:flex;justify-content: start;padding-left: 10px;">
                </van-tab>
            </van-tabs>
            <div class="FFContentStyle">
                <div style="margin-top: 14px">
                    <div class="titleClass">
                        <img style="margin: 9px 12px 10px 11px; width: 17px; height: 17px"
                            src="../../../assets/images/矩形装饰.png" />
                        有限空间作业
                    </div>
                    <div class="contentClass" style="margin-bottom: 60px;">
                        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了"
                            @load="getRepairApproval">
                            <div class="stepsItemContentDiv" v-for="item, index in dataList" :key="index">
                                <div class="flex">
                                    <div style="margin-left: 10px;">
                                        <div v-if="item.state == '未通过'" class="unread">未通过</div>
                                        <div v-if="item.state == '已通过'" class="read">已通过</div>
                                    </div>
                                    <div style="margin-left: 20px;">
                                        <p style="font-size: 12px;">审批日期：{{ item.approvalTime }}</p>
                                        <p style="font-size: 12px;">上传人：{{ item.user.userName }}</p>
                                        <p style="font-size: 10px;color: #BEBEBE;">
                                            上传日期：{{ item.createTime }}</p>
                                    </div>
                                </div>
                                <div class="flexLR">
                                    <div></div>
                                    <van-button type="primary" class="btn" @click="LookItemFile(item)">查看附件</van-button>
                                </div>
                            </div>
                        </van-list>
                    </div>
                </div>
            </div>
        </div>
        <van-floating-bubble class="floating-bubble" axis="xy" icon="plus" v-model:offset="offset"
            @click="AddshowModal" />

        <!-- 添加 -->
        <van-popup class="handlePopup" v-model:show="handleShow" closeable :close-on-click-overlay="false"
            :style="{ width: '90%' }">
            <p style="font-size: 18px;margin:12px 15px">新增</p>

            <div class="flexLR" style="font-size: 13.43px;margin: 12px 18px 12px 15px;">
                <div>
                    <p @click="showPicker = true">
                        <span style="color: red;">*</span>审批日期
                        <span style="margin-left: 10px;">
                            {{ insertmodel.Approvaldate }}
                        </span>
                    </p>
                </div>
                <div>
                    <img src="../../../assets/images/workbench/dayIcon.png" alt="" style="width: 14px;height: 14px;">
                </div>
            </div>
            <van-divider style="margin: 12px 15px" />

            <p style="font-size: 13.43px;margin:12px 15px;color: #ffffff;"><span style="color: red;">*</span>审批结果</p>
            <div style="font-size: 13px;margin:12px 90px;color: #ffffff;">
                <van-radio-group v-model="insertmodel.resultsValue" shape="dot">
                    <van-radio name="已通过" icon-size="14px" style="margin-bottom: 20px;"><span
                            style="color: #ffffff;">已通过</span></van-radio>
                    <van-radio name="未通过" icon-size="14px" style="margin-bottom: 20px;"><span
                            style="color: #ffffff;">未通过</span></van-radio>
                </van-radio-group>
            </div>
            <van-divider style="margin: 12px 15px" />

            <p style="font-size: 13.43px;margin:12px 15px;color: #ffffff;"><span style="color: red;">*</span>上传附件</p>
            <van-uploader v-model="insertmodel.material" max-count="1" style="margin: 0 20px;">
                <van-button
                    style="height: 2.1rem;width: 2.1rem;background: transparent;color: #ffffff;border-style:dashed;">
                    <img src="../../../assets/images/workbench/upload.png" alt="" style="width: 100%;height: 100%;">
                </van-button>
            </van-uploader>

            <div class="flexLR" style="margin: 20px">
                <van-button type="primary" class="saveBtn2" @click="handleShow = false">取消</van-button>
                <van-button type="primary" class="saveBtn" @click="handleSubmit">确定</van-button>
            </div>
        </van-popup>

        <van-popup class="handleVanPickerGroup" v-model:show="showPicker" position="bottom">
            <van-picker-group title="审批日期" :tabs="['选择日期', '选择时间']" @confirm="(e) => showPickerSubmit(e)"
                @cancel="showPicker = false">
                <van-date-picker v-model="desiretimeRow" />
                <van-time-picker v-model="desiretimeTime" :columns-type="['hour', 'minute', 'second']" />
            </van-picker-group>
        </van-popup>

        <!-- 预览 -->
        <LookIframe ref="iframebaseRef" classType="ModelEarlyWarning" title="预览"></LookIframe>
    </div>
</template>

<script name="Home">
import { defineComponent, ref, onMounted, nextTick, toRaw } from "vue";
import { GetRepairApproval, AddOrUpdateRepairApprov } from "@/api";
import { useAppStore } from "../../../store";
import { CreatedFormData } from "@/utils/CreatedFormData";
import { showToast, showSuccessToast, showFailToast } from 'vant';
import LookIframe from "@/components/LookIframe/index.vue";
import dayjs from "dayjs";
export default defineComponent({
    components: {
        LookIframe,
    },
    setup() {
        const { userInfo, projectInfo } = useAppStore();
        const offset = ref({ x: 300, y: 400 });
        const active = ref("qyjc");
        const tabsChange = (e) => {
            loading.value = false;
            finished.value = false;
            pageIndex.value = 1;
            dataList.value = [];
            // getRepairApproval()
        };

        const dataList = ref([]);
        const loading = ref(false);
        const finished = ref(false);
        const pageIndex = ref(1);
        const getRepairApproval = async () => {
            const res = await GetRepairApproval(CreatedFormData({
                searchword: "",
                xid: projectInfo.id,
                type: active.value == 'qyjc' ? 2 : 4,
                page: pageIndex.value,
                limit: 10
            }))
            if (res.data) {
                dataList.value = dataList.value.concat(res.data);
                pageIndex.value++;
                loading.value = false;
                if (dataList.value.length >= res.count) {
                    finished.value = true;
                }
            }
        }

        const iframebaseRef = ref(null);
        const LookItemFile = (filePaths) => {
            nextTick(() => {
                iframebaseRef.value.LookItemPics(filePaths.fPath, filePaths.fName);
            })
        };

        // 新增
        const handleShow = ref(false);

        const desiretimeRow = ref([])
        const desiretimeTime = ref([])
        const insertmodel = ref({
            Approvaldate: dayjs().format("YYYY-MM-DD HH:mm:ss"),
            resultsValue: "已通过",
            material: []
        })
        const insertmodelCopy = toRaw({ ...insertmodel.value })
        const AddshowModal = () => {
            insertmodel.value = { ...insertmodelCopy };
            desiretimeRow.value = insertmodel.value.Approvaldate.split(" ")[0].split("-");
            desiretimeTime.value = insertmodel.value.Approvaldate.split(" ")[1].split(":");
            handleShow.value = true;
        }
        const showPicker = ref(false);
        const showPickerSubmit = (value) => {
            insertmodel.value.Approvaldate = value[0].selectedValues.join('-') + ' ' + value[1].selectedValues.join(":");
            showPicker.value = false;
        }
        const handleSubmit = async () => {
            if (insertmodel.value.material.length < 1) {
                showFailToast('请上传附件')
                return
            }
            let fm = CreatedFormData(
                {
                    id: 0,
                    projectId: projectInfo.id,
                    createuserId: userInfo.id,
                    appvoType: active.value == 'qyjc' ? 2 : 4,
                    state: insertmodel.value.resultsValue,
                    approvalTime: insertmodel.value.Approvaldate,
                    file: insertmodel.value.material[0].file
                })
            const res = await AddOrUpdateRepairApprov(fm);
            if (res.code == 0) {
                showSuccessToast(res.msg)
                handleShow.value = false;
                getRepairApproval(active.value == 'qyjc' ? 2 : 4)
            } else {
                showFailToast(res.msg)
            }
        };

        onMounted(() => { });

        return {
            offset,
            active,
            tabsChange,
            dataList,
            loading,
            finished,
            getRepairApproval,
            iframebaseRef,
            LookItemFile,
            handleShow,
            AddshowModal,
            insertmodel,
            showPicker,
            desiretimeRow,
            desiretimeTime,
            showPickerSubmit,
            handleSubmit
        };
    },
});
</script>

<style lang="less" scoped>
.FoundationClass {
    color: #fff;
    width: 100%;
    height: 100%;
    padding: 20px;

    .FoundationContentStyle {
        width: 100%;
        height: 100%;
        --van-tabs-card-height: 70px;

        :deep(.van-tab__text--ellipsis) {
            font-size: 32px;
        }

        :deep(.van-tabs__content) {
            height: 94%;
            width: 100%;
        }

        :deep(.van-tab__panel) {
            height: 98%;
        }

        :deep(.van-tabs__nav) {
            background: none;
        }

        :deep(.van-tabs__nav--card) {
            margin: 0;
            border: none;
        }

        :deep(.van-tab--card) {
            background: url(../../../assets/images/home/大事记.png) no-repeat;
            background-size: 100% 100%;
            color: #8991a2;
            border-right: none;
            margin-right: 2%;
        }

        :deep(.van-tab--card.van-tab--active) {
            background: url(../../../assets/images/home/项目概况.png) no-repeat;
            background-size: 100% 100%;
        }
    }
}

.FFContentStyle {
    height: 100%;
    width: 100%;
    overflow: auto;
    scrollbar-width: none; // 隐藏滚动条样式
}

.titleClass {
    height: 72px;
    width: 100%;
    font-size: 32px;
    display: flex;
    align-items: center;
    background: url("../../../assets/images/Group9436.png") no-repeat;
    background-size: 100% 100%;
}

.contentClass {
    padding: 10px;
    width: 100%;
    overflow-y: auto;
    max-height: 60vh;
}

.stepsItemContentDiv {
    color: #ffffff;
    background: url('../../../assets/images/workbench/JKBG.png') no-repeat;
    background-size: 100% 100%;
    padding: 26px;
    line-height: 50px;
    font-size: 22px;
    margin-top: 20px;
}

.unread {
    border: 2px solid #F9BA1B;
    color: #F9BA1B;
    font-size: 30px;
    width: 130px;
    text-align: center;
    transform: rotate(-15deg);
}

.read {
    border: 2px solid #187ff5;
    color: #187ff5;
    font-size: 30px;
    width: 130px;
    text-align: center;
    transform: rotate(-15deg);
}

.btn {
    background-color: transparent;
    border: none;
    color: #0089FF;
    padding: 0px;
    font-size: 26px;
}

.saveBtn {
    width: 48%;
    height: 66px;
    border-radius: 6px;
    background: linear-gradient(180deg, #7FA9DB 0%, #93D3EF 97.76%);
    border: none;
}

.saveBtn2 {
    width: 48%;
    height: 66px;
    border-radius: 6px;
    background: linear-gradient(180deg, #FF7D7D 0%, #EE5E5E 100%);
    border: none;
}

// 弹窗处理
:deep(.handlePopup) {
    background-color: #111d37;
    color: #ffffff;
}

:deep(.van-field__label) {
    color: #ffffff;
}

:deep(.van-field__control) {
    color: #ffffff;
}

:deep(.van-uploader__file) {
    background-color: transparent;
    border: 1px dashed #fffffF;
    border-radius: 6px;
}

:deep(.van-uploader__file-name) {
    color: #ffffff;
}

:deep(.van-uploader__file-icon) {
    color: #ffffff;
}

// 组合框
:deep(.handleVanPickerGroup .van-picker-group) {
    background-color: #010515;
}

:deep(.handleVanPickerGroup .van-tabs__nav) {
    background-color: #010515 !important;
}

:deep(.handleVanPickerGroup .van-tab__text) {
    color: #ffffff;
}
</style>
